<template>
  <div class="er-code-container">
    <user-bg></user-bg>
    <div class="down-content">
      我的推广码
      <i class="el-icon-arrow-down"></i>
    </div>

    <div class="code">
      <!-- <img src="/static/images/qrcode_01.png" alt=""> -->
      <canvas id="msg" class="ad-img"></canvas>
      <div class="number">{{user_info.my_invite_code}}</div>
    </div>

    <bot-contact></bot-contact>
  </div>
</template>

<script>
import userBg from "@/components/userBg";
import botContact from "@/components/botContact";
import { Toast } from "mint-ui";
import { Cell } from "mint-ui";
import constant from "@/util/constant.js";
// 引用API文件
import http from "@/util/http.js";

import QRCode from "qrcode";
export default {
  name: "index",
  data() {
    return {
      moneyNum: "",
      isShowMoney: false,
      user_info: {}
    };
  },
  components: {
    userBg,
    botContact,
    Cell
  },
  computed: {},
  created() {
    this.userinfo();
  },
  mounted() {
    this.userinfo();
  },
  methods: {
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;

            // 获取页面的canvas
            var msg = document.getElementById("msg");
            // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(
              msg,
              "http://" +
                document.domain +
                "/register?invite_code=" +
                this.user_info.my_invite_code,
              function(error) {
                console.log(error);
              }
            );
          } else {
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.er-code-container {
  padding-bottom: 140/37.5rem;
  .down-content {
    width: 100%;
    height: 90/37.5rem;
    line-height: 90/37.5rem;
    text-align: center;
    color: #666;
    font-size: 32/37.5rem;
    background: #fff;
    border-bottom: 12/37.5rem solid #eee;
  }
  .code {
    width: 100%;
    padding: 28/37.5rem 150/37.5rem;
    img {
      width: 460/37.5rem;
    }
    .number {
      width: 460/37.5rem;
      padding: 0.4rem 0;
      margin: 0.5rem 0 1rem;
      background: #ff4d4d;
      color: #fff;
      text-align: center;
      .promise(border-radius, 2rem);
    }
  }
}
</style>
